<script setup lang="ts">
import { computed, ref } from 'vue'
import { useMemberStore } from '@/stores'
import { useGuessList } from '@/composables'
import XtxGuess from '@/components/XtxGuess.vue'
import { onLoad } from '@dcloudio/uni-app'

const memberStore = useMemberStore()

const { safeAreaInsets } = uni.getSystemInfoSync()
// 猜你喜欢-组合式函数
const { xtxguessRef, onScrollToLower } = useGuessList()

const profile = computed(() => {
  console.log(memberStore.profile, 'memberStore-7878')
  return memberStore.profile
})

const orderTypes = [
  { type: 1, text: '待付款', icon: 'icon-currency' },
  { type: 2, text: '待发货', icon: 'icon-gift' },
  { type: 3, text: '待收货', icon: 'icon-check' },
  { type: 4, text: '待评价', icon: 'icon-comment' },
]

onLoad(() => {})
</script>

<template>
  <scroll-view scroll-y class="viewport" @scrolltolower="onScrollToLower">
    <view class="top" :style="{ padding: `${safeAreaInsets?.top + 'px'} 50rpx` }">
      <view v-if="profile" class="left">
        <navigator class="navigate" url="/pagesMember/profile/profile" hover-class="none">
          <image class="avatar" mode="aspectFit" :src="profile.avatar"></image>
        </navigator>
        <view class="meta">
          <view class="nickname">{{ profile.nickname || profile.account }}</view>
          <navigator url="/pagesMember/profile/profile" hover-class="none">
            <text class="update">更改头像昵称</text>
          </navigator>
        </view>
      </view>
      <view v-else class="left">
        <navigator url="/pages/login/login" hover-class="none">
          <image
            class="avatar gray"
            mode="aspectFit"
            src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-06/db628d42-88a7-46e7-abb8-659448c33081.png"
          ></image>
        </navigator>
        <view class="meta">
          <view class="nickname">未登录</view>
          <navigator url="/pages/login/login" hover-class="none">
            <text class="tip">点击登录账号</text>
          </navigator>
        </view>
      </view>
      <navigator url="/pagesMember/setting/setting" class="right" hover-class="none">
        设置
      </navigator>
    </view>

    <view class="my-order">
      <view class="title">
        <view class="my">我的订单</view>
        <navigator url="/pagesOrder/orderList/orderList" class="all"
          >查看全部订单<text class="icon icon-right"></text
        ></navigator>
      </view>
      <view class="content">
        <navigator
          v-for="item in orderTypes"
          :key="item.type"
          hover-class="none"
          class="navigator"
          :class="item.icon"
          :url="`/pagesOrder/orderList/orderList?type=${item.type}`"
        >
          {{ item.text }}
        </navigator>
        <button class="contact icon-handset" open-type="contact">售后</button>
      </view>
    </view>
    <view class="guess-list">
      <XtxGuess ref="xtxguessRef"></XtxGuess>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
@import './styles/my';
</style>
